<template>
	<view class="control-container">
		<!-- 设备状态概览 -->
		<view class="status-overview">
			<view class="status-item">
				<text class="status-title">设备总数</text>
				<text class="status-value">{{deviceStats.total}}</text>
			</view>
			<view class="status-divider"></view>
			<view class="status-item">
				<text class="status-title">在线设备</text>
				<text class="status-value online">{{deviceStats.online}}</text>
			</view>
			<view class="status-divider"></view>
			<view class="status-item">
				<text class="status-title">异常设备</text>
				<text class="status-value warning">{{deviceStats.warning}}</text>
			</view>
		</view>

		<!-- 设备类型切换 -->
		<scroll-view class="device-types" scroll-x>
			<view 
				class="type-item" 
				v-for="(type, index) in deviceTypes" 
				:key="index"
				:class="{ active: currentType === type.id }"
				@tap="switchDeviceType(type.id)"
			>
				{{type.name}}
			</view>
		</scroll-view>

		<!-- 设备列表 -->
		<swiper class="device-list-container" :current="currentTypeIndex" @change="handleSwiperChange">
			<!-- 环境检测设备列表 -->
			<swiper-item>
				<scroll-view scroll-y class="device-list">
					<view class="device-card" v-for="(device, index) in environmentDevices" :key="index">
						<view class="device-header">
							<text class="device-name">{{device.name}}</text>
							<text class="device-status" :class="device.online ? 'online' : 'offline'">
								{{device.online ? '在线' : '离线'}}
							</text>
						</view>
						<view class="device-data">
							<view class="data-item" v-for="(data, key) in device.data" :key="key">
								<text class="data-label">{{data.label}}</text>
								<view class="data-value">
									<text class="value">{{data.value}}</text>
									<text class="unit">{{data.unit}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 智能电闸列表 -->
			<swiper-item>
				<scroll-view scroll-y class="device-list">
					<view class="device-card" v-for="(device, index) in switchDevices" :key="index">
						<view class="device-header">
							<text class="device-name">{{device.name}}</text>
							<text class="device-status" :class="device.online ? 'online' : 'offline'">
								{{device.online ? '在线' : '离线'}}
							</text>
						</view>
						<view class="device-control">
							<view class="power-status">
								<text class="status-label">当前状态</text>
								<text class="status-value">{{device.power ? '开启' : '关闭'}}</text>
								<text v-if="device.warning" class="warning-text">{{device.warningMessage}}</text>
							</view>
							<switch :checked="device.power" @change="togglePower(device)" color="#007AFF" />
						</view>
						<view class="power-info" v-if="device.power">
							<text class="info-label">实时功率</text>
							<text class="info-value" :class="{'warning': device.warning}">{{device.currentPower}}W</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			deviceStats: {
				total: 8,
				online: 6,
				warning: 2
			},
			deviceTypes: [
				{ id: 'environment', name: '环境检测' },
				{ id: 'switch', name: '智能电闸' }
			],
			currentType: 'environment',
			currentTypeIndex: 0,
			environmentDevices: [
				{
					id: 1,
					name: '客厅空气检测',
					online: true,
					data: {
						pm25: { label: 'PM2.5', value: 35, unit: 'μg/m³' },
						temperature: { label: '温度', value: 26.5, unit: '℃' },
						humidity: { label: '湿度', value: 65, unit: '%' },
						co2: { label: 'CO2', value: 800, unit: 'ppm' }
					}
				},
				{
					id: 2,
					name: '卧室空气检测',
					online: true,
					data: {
						pm25: { label: 'PM2.5', value: 28, unit: 'μg/m³' },
						temperature: { label: '温度', value: 25.0, unit: '℃' },
						humidity: { label: '湿度', value: 60, unit: '%' },
						co2: { label: 'CO2', value: 650, unit: 'ppm' }
					}
				},
				{
					id: 3,
					name: '书房空气检测',
					online: false,
					data: {
						pm25: { label: 'PM2.5', value: 0, unit: 'μg/m³' },
						temperature: { label: '温度', value: 0, unit: '℃' },
						humidity: { label: '湿度', value: 0, unit: '%' },
						co2: { label: 'CO2', value: 0, unit: 'ppm' }
					}
				}
			],
			switchDevices: [
				{
					id: 4,
					name: '客厅总闸',
					online: true,
					power: true,
					currentPower: 1200,
					warning: true,
					warningMessage: '功率过高'
				},
				{
					id: 5,
					name: '空调电闸',
					online: true,
					power: true,
					currentPower: 800
				},
				{
					id: 6,
					name: '卧室电闸',
					online: true,
					power: false,
					currentPower: 0
				},
				{
					id: 7,
					name: '厨房电闸',
					online: true,
					power: true,
					currentPower: 500
				},
				{
					id: 8,
					name: '书房电闸',
					online: false,
					power: false,
					currentPower: 0
				}
			]
		}
	},
	methods: {
		switchDeviceType(typeId) {
			this.currentType = typeId
			this.currentTypeIndex = this.deviceTypes.findIndex(type => type.id === typeId)
		},
		handleSwiperChange(e) {
			const index = e.detail.current
			this.currentType = this.deviceTypes[index].id
		},
		togglePower(device) {
			device.power = !device.power
			if (!device.power) {
				device.currentPower = 0
			}
			// TODO: 实现设备开关控制逻辑
			uni.showToast({
				title: `${device.name}已${device.power ? '开启' : '关闭'}`,
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss">
.control-container {
	padding: 20rpx;
	background: #f5f5f5;
	min-height: 100vh;

	.status-overview {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.status-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.status-title {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 10rpx;
			}

			.status-value {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;

				&.online {
					color: #07c160;
				}

				&.warning {
					color: #ff4d4f;
				}
			}
		}

		.status-divider {
			width: 2rpx;
			height: 50rpx;
			background: #eee;
		}
	}

	.device-types {
		white-space: nowrap;
		padding: 20rpx 0;
		margin-bottom: 20rpx;

		.type-item {
			display: inline-block;
			padding: 15rpx 40rpx;
			margin-right: 20rpx;
			background: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #666;

			&.active {
				background: #007AFF;
				color: #fff;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.device-list-container {
		height: calc(100vh - 300rpx);

		.device-list {
			height: 100%;
			padding: 10rpx 0;

			.device-card {
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.device-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.device-name {
						font-size: 32rpx;
						font-weight: bold;
					}

					.device-status {
						font-size: 24rpx;
						padding: 4rpx 15rpx;
						border-radius: 20rpx;

						&.online {
							background: #e8f5e9;
							color: #07c160;
						}

						&.offline {
							background: #f5f5f5;
							color: #999;
						}
					}
				}

				.device-data {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;

					.data-item {
						flex: 1;
						min-width: 200rpx;
						background: #f8f8f8;
						padding: 20rpx;
						border-radius: 15rpx;

						.data-label {
							font-size: 24rpx;
							color: #666;
							margin-bottom: 10rpx;
							display: block;
						}

						.data-value {
							.value {
								font-size: 32rpx;
								font-weight: bold;
								color: #333;
							}

							.unit {
								font-size: 24rpx;
								color: #999;
								margin-left: 5rpx;
							}
						}
					}
				}

				.device-control {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.power-status {
						.status-label {
							font-size: 24rpx;
							color: #666;
							margin-right: 10rpx;
						}

						.status-value {
							font-size: 28rpx;
							color: #333;
						}

						.warning-text {
							font-size: 24rpx;
							color: #ff4d4f;
							margin-left: 20rpx;
						}
					}
				}

				.power-info {
					margin-top: 20rpx;
					padding-top: 20rpx;
					border-top: 1rpx solid #eee;

					.info-label {
						font-size: 24rpx;
						color: #666;
						margin-right: 10rpx;
					}

					.info-value {
						font-size: 28rpx;
						color: #333;

						&.warning {
							color: #ff4d4f;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
}
</style> 